<template>
  <div class="app-card relative box-border bg-#fff mr-16px w-432px mb-16px">
    <div class="flex items-center justify-between">
      <h3 class="link font-size-18px fw-500 lh-26px">
        {{ supplyInfo.supplyTitle }}
      </h3>
      <span :class="APPLICATION_STATUS_CLASS_ENUM[props.data.status]">{{
        APPLICATION_STATUS_ENUM[props.data.status]
      }}</span>
    </div>
    <div class="font-size-14px">
      <div class="lh-20px mt-12px text-light">
        {{ props.data.supplyTime?.slice(0, 16) }} ~
        {{ props.data.orderLastTime?.slice(0, 16) }}
      </div>
      <div class="h-1px mt-22px mb-16px bg-#d8d8d8"></div>
      <div class="text-row">
        <span>申请单号：</span>
        <div>{{ props.data.resourceOrderNumber }}</div>
      </div>

      <div class="text-row">
        <span>申请说明：</span>
        <div>{{ props.data.supplyDesc }}</div>
      </div>
      <div class="text-row">
        <span>资源类别：</span>
        <div>{{ SOURCE_TYPE_ENUM[supplyInfo.supplyType] }}</div>
      </div>
      <!-- <div class="text-row">
        <span>资源来源：</span>
        <div>算力圈</div>
      </div> -->
      <div class="text-row">
        <span>联系人：</span>
        <div>{{ props.data.resourceSupply?.supplyUserInfo?.nickName }}</div>
      </div>
      <div class="text-row">
        <span>联系方式：</span>
        <div>{{ props.data.resourceSupply?.supplyUserInfo?.phonenumber }}</div>
      </div>
      <div class="text-right mt-20px">
        <template v-if="props.data.status === 0">
          <el-button class="text-light" @click="handleCancel"
            >取消申请</el-button
          >
        </template>
        <template v-else-if="props.data.status === -1">
          <el-popover
            placement="top"
            :width="250"
            trigger="click"
            :content="props.data.remark"
          >
            <template #reference>
              <el-button type="primary">驳回原因</el-button>
            </template>
          </el-popover>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  APPLICATION_STATUS_ENUM,
  APPLICATION_STATUS_CLASS_ENUM,
  SOURCE_TYPE_ENUM,
} from "@/const";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(["refresh"]);
const supplyInfo = computed(() => props.data.resourceSupply);

const $api = inject("$api");
// 取消申请
const handleCancel = async () => {
  await ElMessageBox.confirm("确定要取消该资源申请吗", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await $api.supply.cancelApply(props.data.id);
  ElMessage.success("取消成功");
  emits("refresh");
};
</script>

<style scoped lang="less">
.app-card {
  border: 1px solid #d9dbe1;
  padding: 21px 28px 18px 24px;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    background: url("/svg/folder.svg") no-repeat center;
    width: 71px;
    height: 44px;
    bottom: -4px;
    left: 0;
  }
  &:nth-child(3n) {
    margin-right: 0;
  }
}
.text-row {
  color: @text-light;
  display: flex;
  align-items: flex-start;
  line-height: 20px;
  margin-bottom: 12px;
  > div {
    flex: 1;
    .single-overflow;
  }
}
</style>
